<template>
  <div class="public_height100 p20 pub_bgColorFFF">
    <div class="table_content">
      <div class="crumbs flex_start">
        <span class="crumbs_active" @click="goPage('layout/customer')">客户列表</span>
        <img src="@/assets/img/customer/crumbs_next.png" alt="返回" class="pub_imgSize16 ml8" />
        <span class="ml8">课题组</span>
      </div>
      <!-- ====== 表格上方的筛选条件 start ======-->
      <div class="table_filter flex_space_between mt16">
        <div class="flex_start">
          <div class="table_filter_search">
            <el-input v-model="params.commonSearch" class="pub_input pub_input_search" placeholder="搜索课题组名称" clearable @keydown.enter.native="handleSearch" @clear="handleSearch">
              <img slot="prefix" src="@/assets/img/orderManagement/search.png" class="pub_imgSize16" />
            </el-input>
          </div>
          <div class="table_filter_search ml12">
            <el-button type="text" class="public_confirm_btn pub_button" @click="handleSearch"> 搜索 </el-button>
          </div>
        </div>
        <div class="flex_start flex_end">
          <div>
            <el-button type="text" class="w108 pub_button pub_buttonGreen" @click="showDilogBtn('addDialogVisible')">
              <img src="@/assets/img/orderManagement/add.png" alt="添加课题组" />
              <span class="ml5">添加课题组</span>
            </el-button>
          </div>
          <div class="ml12">
            <el-button type="text" class="w108 pub_button pub_buttonRed" @click="delteDataBtn">
              <img src="@/assets/img/orderManagement/delete.png" alt="批量删除" />
              <span class="ml5">批量删除</span>
            </el-button>
          </div>
        </div>
      </div>
      <el-table ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" border :height="`${536 * $f}px`" class="wp100 mt12" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" :width="`${50 * $f}`" />
        <el-table-column label="课题组名称" show-overflow-tooltip prop="researchGroupName" align="center" />
        <el-table-column label="操作" align="center" :width="`${200 * $f}`">
          <template slot-scope="{ row }">
            <el-button class="pub_button public_1EB398_btn" type="text" size="mini" @click="lookPurchaser(row)">采购人</el-button>
            <el-button v-if="row.researchGroupName != '默认课题组'" class="pub_button public_1EB398_btn" type="text" size="mini" @click="editBtnClick(row)">编辑</el-button>
            <el-button v-if="row.researchGroupName != '默认课题组'" type="text" class="pub_button public_F16363_btn" size="mini" @click="delBtnClick(row)">删除</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <PageEmptyData />
        </template>
      </el-table>
      <div ref="pubPageinationRef" class="pub_pageination flex_center mt18">
        <el-pagination background layout="total,prev, pager, next" :total="tableData.length" :page-size="tableData.length"> </el-pagination>
      </div>
    </div>
    <!-- 删除提示 -->
    <deleteDialog :multiple-selection="multipleSelection" :visible="deleteDialogVisible" @close="closeDialog" @submit="confirmDelete" />
    <!-- 添加课题组 -->
    <PageDialog :title="addParams.id ? '编辑课题组' : '添加课题组'" :dialog-visible="addDialogVisible" :width="`${$f * 600}px`" @close="closeDialog" @submit="confirmAdd">
      <el-form ref="ruleForm" :model="addParams" label-width="5.625rem" class="pub_form_item">
        <el-form-item label="课题组名称">
          <el-input v-model="addParams.researchGroupName" placeholder="请输入课题组名称" class="pub_input" :maxlength="10"></el-input>
        </el-form-item>
      </el-form>
    </PageDialog>
  </div>
</template>
<script>
import tableFun from '@/mixin/tableFun.js';
export default {
  mixins: [tableFun],
  data() {
    return {
      params: { commonSearch: '' },
      addParams: { researchGroupName: '' },
      dataListOrg: []
    };
  },
  created() {
    this.params.customerId = this.$route.query.customerId;
    this.getDataList();
  },
  methods: {
    //关闭弹窗
    closeDialog() {
      this.selectedRow = null;
      this.multipleSelection = [];
      this.deleteDialogVisible = false;
      this.exporttDialogVisible = false;
      this.orderDialogVisible = false;
      this.importDialogVisible = false;
      this.addDialogVisible = false;
      this.addParams = Object.assign({}, this.$options.data().addParams); //重置参数
    },
    async getDataList() {
      let res = await this.$api.get(this.$url.researchGroupAll, { customerId: this.params.customerId });
      let info = { id: this.$route.query.customerId, researchGroupName: '默认课题组' };
      this.tableData = [info, ...res.data];
      this.dataListOrg = [info, ...res.data];
      if (this.params.commonSearch) {
        this.handleSearch();
      }
    },
    async confirmDelete() {
      let res = null;
      if (this.multipleSelection.length > 0 && this.selectedRow === null) {
        let idArr = this.multipleSelection.map(val => val.id);
        res = await this.$api.post(this.$url.researchGroupDeleteBatch, idArr);
      } else {
        res = await this.$api.post(this.$url.researchGroupDelete, { id: this.selectedRow.id });
      }
      this.closeDialog();
      if (res.code === 200) {
        this.$message.success('删除成功');
        this.getDataList();
      } else {
        this.$message.success('删除失败');
      }
    },
    async confirmAdd() {
      let { researchGroupName, id } = this.addParams;
      if (!researchGroupName) {
        return this.$message.warning('请输入课题组名称');
      } else if (researchGroupName === '默认课题组') {
        return this.$message.warning("不能以'默认课题组'为名称");
      }
      let url = id ? this.$url.researchGroupUpdate : this.$url.researchGroupAdd;
      this.addParams.customerId = this.params.customerId;
      let res = await this.$api.post(url, this.addParams);
      if (res.code === 200) {
        this.closeDialog();
        this.getDataList();
        this.$message.success(id ? '更新成功' : '新增成功');
      }
    },
    handleSearch() {
      this.tableData = this.dataListOrg.filter(item => item.researchGroupName.indexOf(this.params.commonSearch) !== -1);
    },
    goPage(pageUrl) {
      this.$router.push({ path: '/' + pageUrl, query: { activeIndex: '4-4' } });
    },
    lookPurchaser(row) {
      this.$router.push({ path: '/layout/purchaser', query: { activeIndex: '4-4', researchGroupName: row.researchGroupName, id: row.id, customerId: this.$route.query.customerId } });
    }
  }
};
</script>
<style lang="less" scoped>
.table_content {
  height: calc(100% - 90px);
}
</style>
